<template>
  <div class="error_page flex-center column position-ref full-height">
    <div class="flex-center">
      <div class="error_code">404</div>
      <div class="error_message" style="padding: 10px">页面, 好像丢啦~~</div>
    </div>
    <div>
      <div class="error_message" style="padding: 10px"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.error_page {
  margin-bottom: 0 !important;
}

.full-height {
  min-height: calc(
    100vh - $nil-header-height - $nil-app-nav-height - $nil-padding-2 * 4
  );
}

.flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
  &.column {
    flex-direction: column;
  }
}

.position-ref {
  position: relative;
}

.error_code {
  border-right: 2px solid;
  font-size: 26px;
  padding: 0 15px 0 15px;
  text-align: center;
  color: #636b6f;
  font-weight: 100;
  font-family: "Nunito", sans-serif;
}

.error_message {
  font-size: 18px;
  text-align: center;
  color: #636b6f;
  font-weight: 100;
  font-family: "Nunito", sans-serif;
}
</style>
